<template>
  <div class="goods">
    <list
      v-model="loading"
      :finished="goods[type].finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
    >
      <tabs
        v-model="type"
        @click="changeType"
        sticky
        offset-top="46"
        title-active-color="#ff5777"
        animated
        :border="false"
      >
        <tab
          :title="val.title"
          v-for="(val, key) in goods"
          :key="key"
          :name="key"
        >
          <div class="goodsList">
            <div
              class="goods-item"
              v-for="(item, index) in val.list"
              :key="index"
              @click="goodsClick(item.iid)"
            >
              <v-image :src="item.show.img" :lazy-load="true"></v-image>
              <div>
                <p class="desc">{{ item.title }}</p>
                <div class="priceAndsc">
                  <span class="price">￥{{ item.price }}</span>
                  <icon name="star-o" /><span>{{ item.cfav }}</span>
                </div>
              </div>
            </div>
          </div>
        </tab>
      </tabs>
    </list>
  </div>
</template>

<script>
import { Tab, Tabs, Toast, List, Image as vImage, Icon } from "vant";
import { get } from "../../../helpers/request";
export default {
  name: "goods",
  components: {
    Tab,
    Tabs,
    List,
    vImage,
    Icon
  },
  data() {
    return {
      type: "pop",
      goods: {
        pop: { title: "流行", page: 0, list: [], finished: false },
        new: { title: "新款", page: 0, list: [], finished: false },
        sell: { title: "精选", page: 0, list: [], finished: false }
      },
      loading: false,
      finished: false,
      error: false
    };
  },
  created() {
    //显示首页数据
    for (let key in this.goods) {
      this.getData(key, this.goods[key].page + 1);
    }
  },
  methods: {
    getData(type, page) {
      get("/home/data", { type, page })
        .then(res => {
          this.goods[type].list.push(...res.data.list);
          this.goods[type].page++;
        })
        .catch(error => {
          Toast("数据获取失败");
        });
    },
    changeType(name) {
      this.type = name; //修改类型
    },
    //加载更多回调
    onLoad() {
      let type = this.type;
      let page = this.goods[type].page + 1;
      get("/home/data", { type, page })
        .then(res => {
          this.goods[type].list.push(...res.data.list);
          this.goods[type].page++;
          this.loading = false;
        })
        .catch(error => {
          Toast("没有更多数据了");
          this.goods[type].finished = true;
          this.loading = false;
          this.error = true;
        });
    },
    goodsClick(iid) {
      this.$router.push("/detail/" + iid);
    }
  }
};
</script>

<style scoped lang='scss'>
.goods {
  min-height: 250px;
}
::v-deep .van-icon {
  font-size: 12px;
}
.goodsList {
  box-sizing: border-box;
  padding: 0 4px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .goods-item {
    width: 175px;
    text-align: center;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .desc {
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 3px;
    }
    .priceAndsc {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      .price {
        color: #ff5777;
        font-size: 12px;
        margin-right: 10px;
      }
    }
  }
}
</style>
